<!-- 采样点项目 -->
<template>
	<view class="index">
		
		<view class="location-container">
			<view class="location-tips"><text class="location-title">监测点列表：</text>
			<text class="location-title">当前监测点：监测点{{samplingPointId}}</text></view>
			<view class="location-list">
				<!-- <text class="location-item" v-for="(item, index) of locationTabs" :key="index" :class="[item == samplingPointId ? 'atvi' : '']" 
				@click="setSamplingPoint(item, index)">监测点{{item}}</text> -->
				<text class="location-item" v-for="(item, index) of transmitArr" :key="index" :class="[item.id == samplingPointId ? 'atvi' : '']" 
				@click="setSamplingPoint(item.id, index)">{{item.name == null ? '监测点'+item.id:item.name}}</text>
			</view>
		</view>
		
		<view class="content-position">
			<!-- #ifdef APP-PLUS || MP-WEIXIN -->
			<view class="press-tips">点击行上边的名称可语音输入</view>
			<!-- #endif -->
			<view class="uni-card">
				<view class="item-tabs">
					<text class="item-tab" v-for="(item, index) of tabs" :key="index" :class="[item.id == samplingId ? 'atvi' : '']" 
					@click="setItem(item.id, index)">{{item.name}}</text>
				</view>
				
				<view class="uni-list">
					<label-input v-for="(item, index) of sampleItem" ref="mpvuePicker" :key="index" :child_data="item" :alldata="sampleItem" :commondata="taskCommon" :inkey="index" :oneData="oneData" :tabIndex="samplingPointId" @input_value="inputValue" ></label-input>
				</view>
			</view>
			
			<view class="btn-row uni-flex">
				<button type="primary" class="primary uni-flex-item" style="margin-right: 10upx;" @tap="save">保存</button>
				<button type="primary" class="primary uni-flex-item" @tap="nextItem" v-if="tabIndex < tabs.length-1">保存并下一个</button>
				<button type="primary" class="primary uni-flex-item" @tap="lastItem" v-if="tabIndex >= tabs.length-1">保存并上传</button>
			</view>
		
		</view>
		
	</view>
</template>

<script>
	
	import net from '../../net.js';
	import service from '../../service.js';
	import utils from '../../common/utils.js';
	import labelInput from '../../components/label-input.vue';
	import uploaddata from '../../uploaddata.js';
	
	export default {
		components: {
			labelInput
		},
		data() {
			return{
				data: {
					common: {},
					cyd_info: {},
				},
				taskCommon: {},
				sampleItem: {},		// 样品信息
				samplingId: '',		// 样品id
				tabs: [],	//   样品列表的tab
				tabIndex: 0, // tab 的 index
				locationTabs: [],	// 监测点列表
				locationTabIndex: 0,
				samplingPointId: 1,	// 监测点
				oneSamplingPointId: 1,  // 第一个
				codeId: 0,	// 任务 code
				tableId: 0,	// 采样表 #id
				dayNum: 0,	// 天数,第几天
				oneData: null,	// 上一个样品的数据, 默认第一个样品数据, 因需求改动没把 oneData 改成对应的单词
				transmitArr: [],
				samplingPointName: '',
			}
		},
		onLoad(res) {
			this.codeId = res.codeId;
			this.tableId = res.tableId;
			this.dayNum = res.dayNum;
			this.samplingPointId = res.samplingPointId;
			this.samplingPointName = res.samplingPointName;
			this.transmitArr = JSON.parse(res.transmitArr)

			console.log(this.transmitArr,"我是transmitArr")
			console.log(this.samplingPointId ,"我是samplingPointId")
			let data = service.getTaskDetailDay(this.codeId, this.tableId, this.dayNum);
			console.log(this.data,"222222")
			// 任务的公共数据,自动计算需要用到,只是处理了任务的公共数据,没有获取公共天数和公共监测点的数据
			// 如果需求需要,请自己添加
			
			let taskCommon = service.getTaskDetailItem(this.codeId, this.tableId);
			if(taskCommon && taskCommon.common && taskCommon.common.value) {
				this.taskCommon = taskCommon.common.value;
			}
			this.tabs = [];
			this.locationTabs = [];
			Object.assign(this.data, data);
			console.log(this.data,"item_new中的data")
			this.initData();
		},
		onReady() {
			this.initItem();
		},
		methods: {
			//组件传值事件,input组件传出的新值
			inputValue(newdata,key){
				console.log(newdata,key);
				this.sampleItem[key]=newdata;
			},
			initData() {
				let locationList = this.data.cyd_info;
				this.locationTabs = Object.keys(locationList);
				this.oneSamplingPointId = this.locationTabs[0];
				this.countTabs();
			},
			// 计算样品tabs，并初始化
			countTabs(){
				let list = this.data.cyd_info[this.samplingPointId]
				console.log(list,"---------list");
				this.tabs = [];
				let countTitle = 1;
				for(let item in list) {
					let name = (list[item] && list[item].code && list[item].code.value) || '样品信息'+(countTitle++);
					this.tabs.push({name: name, id: item});	
				}
					
				this.oneId = this.tabs[0];
				this.samplingId = this.oneId.id;
				this.oneData = list[this.oneId.id];
				this.sampleItem = list[this.samplingId];
				this.tabs.some((item, index)=>{
					if(item.id == this.samplingId) {
						this.tabIndex = index;
						return true;
					}
				});
				this.initItem();
			},
			// 设置样品信息(编号下标也会加bug)
			setItem(id, index){
				if(this.samplingId == id) return;
				this.samplingId = id; 
				
				try{
					if(index > this.tabIndex) {
						console.log(index > this.tabIndex)
						this.oneId = this.tabs[this.tabIndex];
						this.oneData = this.data.cyd_info[this.samplingPointId][this.oneId.id];//根据下标拿到对应数据
						// console.log(this.data.cyd_info)
						// console.log(this.data.cyd_info[this.samplingPointId])
						console.log(this.data.cyd_info[this.samplingPointId][this.oneId.id])
					}
					this.sampleItem = this.data.cyd_info[this.samplingPointId][this.samplingId];
				}catch(e){
					console.log(e);
				}
				this.initItem();

				this.tabIndex = index;
			},
			// 设置监测点
			setSamplingPoint(id, index){
				console.log(id,index)
				this.samplingPointId = id;
				console.log(this.samplingPointId)
				this.copyOneSamplingPoint();
				this.countTabs();
				uni.pageScrollTo({ scrollTop: 0, duration: 300 });
			},
			// 复制第一个监测点的数据到其他监测点
			copyOneSamplingPoint(){
				if(this.oneSamplingPointId == this.samplingPointId) return;
				let oneSampleList = this.data.cyd_info[this.oneSamplingPointId];
				let otherSampleList = this.data.cyd_info[this.samplingPointId];
				let oenIds = Object.keys(oneSampleList);
				let otherIds = Object.keys(otherSampleList);
				oenIds.forEach((item, index) => {
					let oneSample = oneSampleList[oenIds[index]];
					let otherSample = otherSampleList[otherIds[index]];
					for(let field in oneSample) {
						let oneItem = oneSample[field];
						let otherItem = otherSample;
						if(otherItem === undefined) {
							for(let key in otherSample) {
								if(otherSample[key].title == oneItem.title) {
									otherItem = otherSample[key];
									break;
								}
							}
						}
						if(otherItem && ['1', '2', '3', '5', '6', '7'].indexOf(otherItem.data_type) != -1) {
							if(otherItem.value === '' || otherItem.value == null) {
								otherItem.value = oneItem.value;
							}
						}
					}
				});
			},
			initItem(){
				setTimeout(()=>{
					this.$refs.mpvuePicker && this.$refs.mpvuePicker.forEach((item, index)=>{
						item.init();
					});
				}, 100);
			},
			// 保存并下一个
			nextItem(){
				setTimeout(()=>{
					this.saveData();
					let index = this.tabIndex;
					++index;
					let samplingId = this.tabs[index].id;
					this.setItem(samplingId, index);
					uni.pageScrollTo({ scrollTop: 0, duration: 300 });
				},500)
				
			},
			// 保存并上传
			lastItem(){
				setTimeout(()=>{
					this.saveData(true)
				},500)
				
			},
			// 保存
			save(){
				setTimeout(()=>{
					this.saveData();
				},500)
				
			},
			// 保存数据
			saveData(isSubmit = false){
				
				uni.showLoading({title: '', mask: true});
				
				service.setTaskDetailDay(this.codeId, this.tableId, this.dayNum, this.data, 'cyd_info');
				utils.exeMainCallBack({}, '上传');
				if (!isSubmit) {
					uni.hideLoading();
					uni.showToast({icon: 'none', title: '保存成功'});
				} else {
					uploaddata.uploadSampleData(false, true);
				}
			}
		},
	}
</script>

<style>
	
	page {
		overflow:hidden;
		height:100%;
	}
	
	.index {
		display: flex;
		flex-direction: column;
	}
	
	.uni-card {
		margin: 10upx 0 60upx 0;
		border-radius: 0;
	}
	
	.item-tabs, .location-list {
		display: flex;
		flex-wrap: wrap;
		padding: 10upx 15upx 0;
	}
	
	.location-list {
		border-top: 1px solid #ccc;
		position: relative;
		overflow: auto;
		max-height: 300upx;
	}
	
	.location-tips {
		display: flex;
		justify-content: space-between;
	}
	
	.location-container {
		border-bottom: 1px solid #ccc;
		
		z-index: 100;
		background: #FFFFFF;
		padding-bottom: 10upx;
	}
	
	.content-position {
		overflow: auto;
	}
	
	.location-title {
		font-size: 34upx;
		padding: 10upx 15px 0;
	}
	
	.item-tab, .location-item {
		border: 1px solid #007AFF;
		padding: 10px 20px;
		margin: 0 10px 10px;
		font-size: 32upx;
	}
	
	.location-item {
		font-size: 34px;
	}
	
	.item-tab.atvi, .location-item.atvi {
		color: #FFFFFF;
		background: #0FAEFF;
	}
	
	.uni-list-cell:after {
		left: 0;
	}
	
	.uni-list-cell {
		padding: 0 20upx;
		min-height: 90upx;
		color: #666;
	}
	
	.uni-list-cell.con-list {
		flex-wrap: wrap;
	}
	
	.uni-list-cell.con-list text {
		flex: 0 0 100%;
		font-size: 32upx;
	}
	
	
	
	.uni-list-cell-divider ~ .uni-list-cell {
		padding-left: 50upx;
		min-height: 70upx;
	}
	
	.uni-list-cell.no-left {
		padding-left: 20upx;
	}
	
</style>
